<script setup>
	import { computed, ref, onMounted } from 'vue';
	import { useUserStore } from '@/store/userInfo';
	import { useShopStore } from '@/store/shop';

	const userStore = useUserStore( )
	const shopApi = uniCloud.importObject( 'shop' )

	// 店铺信息
	const shopStore = useShopStore( )

	// 获取顶部自定义导航栏
	// const top = ref( uni.getSystemInfoSync( ).safeAreaInsets.top + 2 )
	// 使用微信 API 获取胶囊信息
	// const menuButtonInfo = wx.getMenuButtonBoundingClientRect( )
	// console.log( menuButtonInfo )
	// 检测用户登录
	const isLogin = computed( ( ) => {
		return userStore.userInfo.uid ? true : false
	} )
	// 点击跳转到我的订单
	const goOrder = ( ) => {
		console.log( isLogin, '是否登录' )
		if ( isLogin.value ) {
			return uni.navigateTo( {
				url: "/pages/order/order"
			} )
		} else {
			return uni.showModal( {
				title: "提示",
				content: "请先登录后查看订单",
				confirmText: "登录",
				success( res ) {
					if ( res.confirm ) {
						uni.navigateTo( {
							url: "/pages/login/login"
						} )
					}
				}
			} )
		}
	}

	// 检查当前登录的身份是否为管理员
	const isAdmin = computed( ( ) => {
		return userStore.userInfo.role?.[ 0 ] === 'admin'
	} )

	// 检查当前登录的身份是否为普通用户
	const isUser = computed( ( ) => {
		return userStore.userInfo.role?.[ 0 ] === 'user'
	} )

	// 跳转到后台管理
	const goAdmin = ( ) => {
		uni.navigateTo( {
			url: '/subPackages/managementAdmin/managementAdmin'
		} )
	}

	// 定义一个方法供父组件调用
	const refresh = ( ) => {
		// 把原来在 onShow 中的逻辑移到这里
		// ...
	}

	// 暴露方法给父组件
	defineExpose( {
		refresh
	} )

	const emits = defineEmits( [ 'contractCode' ] )
	// 专享客服
	const getContarct = ( ) => {
		console.log( '客服' )
		emits( 'contractCode' )
	}
</script>

<template>
	<view class="customHead">
		<!-- 头部 -->
		<view class="title">
			<!-- 普通用户显示在线客服 -->
			<view class="contract" v-if="isUser">
				<button class="contact-btn" open-type="contact">
					<u-icon name="server-fill" size="18" color="#343a40"></u-icon>
					<view class="text" style="margin-left: 8rpx;">
						在线客服
					</view>
				</button>
			</view>
			<!-- 管理员显示后台管理 -->
			<view class="admin" v-if="isAdmin" @tap="goAdmin">
				<u-icon name="bag-fill" size="20" color="#343a40"></u-icon>
				<view class="text">
					后台管理
				</view>
			</view>
		</view>
		<!-- 商家信息和商家登录 -->
		<view class="merchant">
			<!-- 商家头像 -->
			<view class="avatar">
				<image :src="shopStore.shopInfo.shop_avatar" mode="aspectFill"></image>
			</view>
			<!-- 店名和备注 -->
			<view class="info">
				<view class="name">
					{{ shopStore.shopInfo.shop_name }}
				</view>
				<view class="dec">
					{{ shopStore.shopInfo.shop_desc }}
				</view>
			</view>
			<!-- 分割线 -->
			<view class="line">
			</view>
			<!-- 付款码 -->
			<view class="kefu" @tap="getContarct">
				<view class="code">
					<up-qrcode :size="24" val="uview-plus"></up-qrcode>
				</view>
				<view class="text" style="font-size: 24rpx;">
					专享客服
				</view>
			</view>
		</view>
		<!-- 底部 -->
		<view class=" bottom">
			<view class="left">
				免费配送
			</view>
			<view class="right" @tap="goOrder">
				我的订单
			</view>
		</view>
	</view>
</template>


<style lang="scss">
	.customHead {
		position: relative; // 使得伪元素能够正确定位
		padding-top: 92rpx;
		width: 100%;
		height: 400rpx;
		overflow: hidden;

		// 使用为元素来给头部添加背景图
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: url('https://mp-25cc8794-9056-4536-a51b-6c5ab0bc5bd9.cdn.bspapp.com/bc.png') no-repeat center center / cover;
			filter: blur(20px); // 对背景图应用模糊效果
			z-index: -1; // 保证背景图在内容后面
		}

		/*头部客服和后台*/
		.title {
			display: flex;
			align-items: center;
			position: relative; // 确保标题层级在伪元素之上
			padding: 0 24rpx;
			height: 64rpx;
			color: $text-font-color-1;
			font-weight: bold;

			.contract {
				display: flex;
				align-items: center;
				padding: 0 24rpx;
				height: 100%;

				.contact-btn {
					display: flex;
					align-items: center;
					background: none;
					border: none;
					margin: 0;
					padding: 0;
					line-height: 1;
					font-size: 24rpx;
					color: #343a40;

					&::after {
						border: none;
					}

					.text {
						margin-left: 8rpx;
					}
				}

				.text {
					font-size: 24rpx;
					color: #343a40;
				}
			}

			.admin {
				display: flex;

			}
		}

		/*商家信息内容部分*/
		.merchant {
			padding: 24rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: $text-font-color-1;
			height: fit-content;

			/*商家头像*/
			.avatar {
				margin-right: 16rpx;
				width: 100rpx;
				height: 100rpx;
				border-radius: 50%;
				overflow: hidden;
			}

			/*店名和备注*/
			.info {
				flex: 1;

				.name {
					font-weight: bold;
				}

				.dec {
					font-size: 24rpx;
					color: $text-font-color-3;
					@include textShenglue(1);
				}
			}

			/*分割线*/
			.line {
				margin: 0 16rpx;
				height: 80rpx;
				width: 2rpx;
				background-color: $text-font-color-4;

				&::before {
					content: '\00a0';
					/* 不可见的空白字符 */
					display: block;
				}
			}

			/*客服微信*/
			.kefu {
				display: flex;
				flex-direction: column;
				align-items: center;
				height: 100%;

				.code {
					margin-bottom: 8rpx;
				}

				.text {
					font-size: 24rpx;
				}
			}
		}

		/*免费配送和我的订单*/
		.bottom {
			display: flex;
			justify-content: space-between;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			padding: 24rpx;
			background-color: #fff;
			border-radius: 32rpx 32rpx 0 0;
			box-sizing: border-box;
			font-size: 28rpx;
			color: $text-font-color-2;
			border-bottom: 1px solid $line-color-aux;
		}

	}
</style>